<template>
   <!--登入-->
   <div class="loginLayout flex">
     <!--占位-->
     <div class="nav"></div>
     <!--内容-->
     <div class="login_content flex">
       <div class="login_title">
         <h2>中信银行实习平台后台管理系统</h2>
         <span>欢迎使用</span>
       </div>
       <div class="login_text flex">
         <div class="zm">
           <span class="title_zm">账户密码登录</span>
         </div>
         <div class="formText">
           <el-form
               ref="ruleFormRef"
               style="max-width: 600px"
               :model="LoginFrom"
               :rules="rules"
               label-width="auto"
               class="demo-ruleForm"
           >
             <el-form-item  prop="mobile">
               <el-input
                   v-model="LoginFrom.mobile"
                   class="input"
                   placeholder="用户名"
                   prefix-icon="User" />
             </el-form-item>
             <el-form-item  prop="password">
               <el-input
                   v-model="LoginFrom.password"
                   type="password"
                   class="input"
                   placeholder="密码"
                   show-password
                   prefix-icon="Lock" />
             </el-form-item>
             <div class="login_label">
               <el-checkbox v-model="checked">自动登录</el-checkbox>
               <a style="float: right;color: #1890ff;cursor: pointer;" >忘记密码 ?</a>
             </div>
             <el-form-item>
               <el-button @click="submitForm( ruleFormRef)" type="primary" style="{width: 100%}">
                 <span class="button">登<span style="padding: 5px">录</span></span>
               </el-button>
             </el-form-item>
           </el-form>
         </div>
       </div>
     </div>
     <!--底部-->
     <footer class="foot flex">
       <span><i class="icon"></i>2024 中信银行实习平台</span>
     </footer>
   </div>

</template>
    
<script setup>
import {reactive,ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {Login} from '@/network/login'

//登入数据
const LoginFrom=reactive({
  mobile:'',
  password:''
})
//账号校验
const validateMobile=(rule,value,callback)=>{
  //不能为空
  if (value===''){
    callback(new Error('用户名是必填项'))
  }else {
    const PhoneNumber=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    PhoneNumber.test(value) ? callback() : callback(new Error('手机号格式不对，请输入正确的手机号'))
  }
}
//密码校验
const validatePassword=(rule,value,callback)=>{
  //不能为空
  if(value ===''){
    callback(new Error('密码是必填项'))
  }else {
    const reg=/^[a-zA-Z0-9_-]{6,12}$/
    reg.test(value) ? callback() : callback(new Error('密码格式不对，需要6到12位字符，请确认格式'))
  }
}

const rules=reactive({
  mobile:[{validator:validateMobile,trigger:'blur'}],
  password:[{validator:validatePassword,trigger:'blur'}]
})

const ruleFormRef=ref()

const router=useRouter()

const checked = ref(false)

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!',LoginFrom)
      Login(LoginFrom).then(({data})=>{
        console.log(data,'data')
          if (data.code===0){
            ElMessage.success('登入成功')
            localStorage.setItem('Authorization',data.data.token_type+" "+data.data.token)
            router.push('/')
          }else {
            ElMessage.warning('密码错误或者用户不存在!')
          }
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style lang="scss" scoped>
.flex{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.loginLayout{
  background-image: url("@/assets/img/LoginBg.png");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  .nav{
    min-height: 100px;
  }
  .login_content{
    .login_title{
      text-align: center;
      h2{
        position: relative;
        inset-block-start: 2px;
        font-weight: 600;
        font-size: 33px;
        cursor: text;
      }
      span{
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 50px;
        cursor: text;
      }
    }
    .login_text{
      align-items: center;
      margin-top: 26px;
      .zm{
        display: flex;
        justify-content: center;
        width: 330px;
        border-bottom:1px solid #D4DFE7 ;
        line-height: 45px;
        font-size: 14px;
        text-shadow: 0 0 .25px currentcolor;
        color: #1890ff;
        .title_zm{
          display: flex;
          width: 87px;
          border-bottom: 2px solid #1890ff;
          padding-left: 2px;
          cursor: pointer;
        }
      }
     .formText{
       margin-top: 14px;
       .demo-ruleForm{
         width: 330px;
         .input{
           height: 40px;
           font-size: 16px;
           margin-bottom: 6px;
           color: black;
         }
         .input:hover{
           border-radius: 5px;
           box-sizing: border-box;
         }
         button{
           margin-top: 15px;
           width: 330px;
           height: 40px;
           font-size: 16px;
           padding-right:5px;
         }
         :deep(.el-checkbox){
           padding-bottom: 15px;
         }
       }
     }
    }
  }
  .foot{
    align-items: center;
    margin-top: 180px;
    padding-left: 15px;
    span{
      font-size: 14px;
      color: rgba(0, 0, 0, 0.88);
      position: relative;
      i{
        position: absolute;
        width: 16px;
        height: 16px;
        background: url("@/assets/img/copyright.png") no-repeat;
        background-size: cover;
        left: -18px;
      }
    }
  }
}
</style> 